<template>
    <div class="Home-container">
       <swiper :lunbotuList="lunbotuList" :isfull="true"></swiper>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/newslist">
              <img src="../img/HomeContainer/每日签到.png" alt="">
              <div class="mui-media-body">每日签到</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/AwardingMallHome">
              <img src="../img/HomeContainer/邀请.png" alt="">
              <div class="mui-media-body">邀请有奖</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/AwardingMallHome">
              <img src="../img/HomeContainer/兑奖商城.png" alt="">
              <div class="mui-media-body">兑奖商城</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
              <img src="../img/HomeContainer/游戏攻略.png" alt="">
              <div class="mui-media-body">游戏攻略</div></a></li>
     </ul> 
     <div class="border"></div>
     <div class="Recommended">
        <div class="RecommendedTitle"><span class="yborder"></span>热门兑奖推荐</div>
           <ul class="mui-table-view mui-grid-view mui-grid-9">
       <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
              <img src="../img/HomeContainer/邀请.png" alt="">
              </router-link></li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
              <img src="../img/HomeContainer/兑奖商城.png" alt="">
              </router-link></li>
       <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
              <img src="../img/HomeContainer/游戏攻略.png" alt="">
              </a></li>
     </ul> 
     </div>
      <div class="border"></div>
      <div class="cash">
        <div class="RecommendedTitle"><span class="yborder"></span>兑奖动态</div>
        <ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../img/HomeContainer/每日签到.png">
            <div class="mui-media-body">
                <p class='mui-ellipsis'> XXXX越换了苹果XXXX <span  class="f_right" style="display:inline-block">2小时前</span></p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../img/HomeContainer/每日签到.png">
            <div class="mui-media-body">
                <p class='mui-ellipsis'>XXXX越换了苹果XXXX <span  class="f_right" style="display:inline-block">2小时前</span></p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../img/HomeContainer/每日签到.png">
            <div class="mui-media-body">
                <p class='mui-ellipsis'>XXXX越换了苹果XXXX<span  class="f_right" style="display:inline-block">2小时前</span> </p>
            </div>
        </a>
    </li>
</ul>
      </div>
        <!-- <div class="clearfix foott">
            <div class="f_left foott1">
                <div class="foot1">安全保障</div>
                <div class="foot1">安全保障</div>
            </div>
             <div class="f_right foott1">
                <div class="foot1">安全保障</div>
                <div class="foot1">安全保障</div>
            </div>
        </div> -->
    </div>
</template>
<script>

import swiper from "./subcomponents/swiper.vue";
import { Toast } from "mint-ui";
export default {
  data() {
    return { lunbotuList: [] };
  },
  created() {
    this.getLunbotu();
  },
  methods: {
    getLunbotu() {
      this.$http.get("api/getlunbo").then(result => {
        console.log(result.body.status);
        if (result.body.status == 0) {
          this.lunbotuList = result.body.message;
        } else {
          Toast("NO");
        }
      });
    }
  },
  components: {
    swiper
  }
};
</script>
<style lang="scss" scoped>
.Home-container {
   padding-bottom:0.4rem; 
   .RecommendedTitle {
      padding: 20px 0 30px 0;
      font-size: 21px;
   }/**********同用标题*******/
  color: #141414;
  background: #ffffff;
  .mui-grid-view {
    background: #ffffff;
    .mui-table-view-cell {
      width: 25%;
      border: none;
      img {
       width: 0.6rem;
    height: 0.6rem;
      }
      .mui-media-body {
        font-size: 14px;
        color: #141414;
      }
    }
  }
  .Recommended {
 
    .mui-grid-view {
          padding-bottom:30px; 
      border:none;
      .mui-table-view-cell {
           width: 31.8%;
          border:1px solid #e0e0e0; 
          border-radius:10px;
        box-shadow:0px 0px 11px #e0e0e0 ;
          margin-left:0.09rem; 
          box-sizing: border-box;
          img{
           width: 1.5rem;
    height: 1.5rem;
          }
      }
    }
  }
  .cash{
    padding-top:30px; 
    padding-bottom:0.88rem; 
    .RecommendedTitle{
      border-bottom:1px solid #e0e0e0;
    }
    .mui-table-view{
      .mui-table-view-cell{
        .mui-media-body{
            line-height: 41px;
        }
      }
    }
  }
}
</style>    
